<template>
  <div>
    <el-button @click="getFile">获取</el-button>
    <el-button @click="submit">提交</el-button>
    <el-input v-model="form.title"></el-input>
    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :auto-upload="false"
      :on-change="upChange"
    >
      <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <el-upload
      id="iviewUp"
      ref="upload"
      :show-upload-list="false"
      :format="['jpg', 'jpeg', 'png']"
      :max-size="2048"
      :before-upload="handleSingleSuccess"
      type="drag"
      action="#"
      style="display: none; width: 0"
    >
    </el-upload>
    <quill-editor
      v-model="form.html"
      ref="myQuillEditor"
      :options="editorOption"
    >
      <!-- @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)" -->
    </quill-editor>
    <div class="quill-editor">
      <div class="ql-container ql-snow">
        <div class="ql-editor">
          <div v-html="form.html"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFile, setFile, upBook } from "@/components/api.js";
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],
  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction
  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ["link", "image", "video"],
  ["clean"], // remove formatting button
];
export default {
  data() {
    return {
      dataList: [
        {
          title: "hellow",
          url: "",
          text: "dssa",
        },
      ],
      form: {
        title: "",
        imgUrl: "",
        html: "",
      },
      editorOption: {
        // 富文本框配置
        placeholder: "",
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector("#iviewUp input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
    };
  },
  methods: {
    handleSingleSuccess(value) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let vm = this;
      let quill = this.$refs.myQuillEditor.quill;
      console.log("res---", vm.$refs.myQuillEditor.quill.getSelection());
      // 如果上传成功
      let file = value.raw;
      let form = new FormData();
      form.append("file", file);
      setFile(form).then((res) => {
        console.log(res);
        let length = quill.getSelection().index;
        // 插入图片 res.info为服务器返回的图片地址
        quill.insertEmbed(length, "image", res.data.data);
        // 调整光标到最后
        quill.setSelection(length + 1);
      });

      // loading动画消失
      this.quillUpdateImg = false;
    },
    upChange(value, list) {
      console.log(value, list);
      let file = value.raw;
      let form = new FormData();
      form.append("file", file);
      setFile(form).then((res) => {
        console.log(res);
        this.form.imgUrl = res.data.data;
      });
    },
    getFile() {
      getFile().then((res) => {
        console.log(res);
      });
    },
    submit() {
      console.log(this.form.html.length);
      upBook(this.form).then((res) => {
        if(res.data.code =='200'){
          this.$router.go(-1)
        }
        console.log(res);
      });
    },
  },
};
</script>

<style scoped>
.text-dis {
  display: flex;
}
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader >>> .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader >>> .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader >>> .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>